import React, { useState } from 'react';
import TweenOne from 'rc-tween-one';
import { Menu } from 'antd';
import { getChildrenToRender } from './utils';

const { Item, SubMenu } = Menu;

const Header = ({ dataSource, isMobile, ...props }) => {
  const [phoneOpen, setPhoneOpen] = useState(undefined);

  const phoneClick = () => {
    setPhoneOpen(!phoneOpen);
  };

  const navData = dataSource.Menu.children;
  const navItems = navData.map((item) => {
    const { children: a, subItem, ...itemProps } = item;
    if (subItem) {
      const subItems = subItem.map(($item, ii) => {
        const { children: childItem, ...subItemProps } = $item;
        const child = childItem.href ? (
          <a {...childItem}>
            {childItem.children.map(getChildrenToRender)}
          </a>
        ) : (
          <div {...childItem}>
            {childItem.children.map(getChildrenToRender)}
          </div>
        );
        return {
          key: $item.name || ii.toString(),
          ...subItemProps,
          label: child
        };
      });
      
      const label = (
        <div
          {...a}
          className={`header0-item-block ${a.className}`.trim()}
        >
          {a.children.map(getChildrenToRender)}
        </div>
      );
      
      return {
        key: item.name,
        ...itemProps,
        label: label,
        children: subItems,
        popupClassName: "header0-item-child"
      };
    }
    
    const label = (
      <a {...a} className={`header0-item-block ${a.className}`.trim()}>
        {a.children.map(getChildrenToRender)}
      </a>
    );
    
    return {
      key: item.name,
      ...itemProps,
      label: label
    };
  });
  
  const moment = phoneOpen === undefined ? 300 : null;
  
  return (
    <TweenOne
      component="header"
      animation={{ opacity: 0, type: 'from' }}
      {...dataSource.wrapper}
      {...props}
    >
      <div
        {...dataSource.page}
        className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
      >
        <TweenOne
          animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
          {...dataSource.logo}
        >
          <img width="100%" src={dataSource.logo.children} alt="img" />
        </TweenOne>
        {isMobile && (
          <div
            {...dataSource.mobileMenu}
            onClick={() => {
              phoneClick();
            }}
          >
            <em />
            <em />
            <em />
          </div>
        )}
        <TweenOne
          {...dataSource.Menu}
          animation={
            isMobile
              ? {
                  height: 0,
                  duration: 300,
                  onComplete: (e) => {
                    if (phoneOpen) {
                      e.target.style.height = 'auto';
                    }
                  },
                  ease: 'easeInOutQuad',
                }
              : null
          }
          moment={moment}
          reverse={!!phoneOpen}
        >
          <Menu
            mode={isMobile ? 'inline' : 'horizontal'}
            defaultSelectedKeys={['sub0']}
            theme="dark"
            items={navItems}
          />
        </TweenOne>
      </div>
    </TweenOne>
  );
};

export default Header;
